<template>
  <div class="homeDetail">
    <div class="header">
      <van-nav-bar
        class="title"
        title="告警详情"
        style="width: 100%; height: 44px"
        left-arrow
        @click-left="onClickLeft"
      />
      <van-tabs v-model:active="active" @click-tab="changeTab">
        <van-tab
          :title="item.title"
          :name="item.type"
          v-for="(item, index) in state.tabs"
          :key="index"
        ></van-tab>
      </van-tabs>
    </div>
    <div class="content">
      <component :is="getComponent(state.active)" />
    </div>
  </div>
</template>

<script setup>
import { reactive, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import disposeEventBasicInfo from "./disposeEventBasicInfo.vue";
import MapViewer from "@/components/MapViewer.vue";
import disposeEventOrderInfo from "./disposeEventOrderInfo.vue";
import disposeEventBackUpOrder from "./disposeEventBackUpOrder.vue";
import disposeEventThreeLevel from "./disposeEventThreeLevel.vue";
import disposeEventEvaluation from "./disposeEventEvaluation.vue";
const route = useRoute();
const router = useRouter();
const state = reactive({
  checked: false,
  fromData: {},
  tabs: [
    {
      title: "告警信息",
      type: "alarmInfo",
    },
    {
      title: "地图预览",
      type: "map",
    },
    {
      title: "工单信息",
      type: "orderInfo",
    },
    {
      title: "增援工单",
      type: "backUpOrder",
    },
    {
      title: "监督评价",
      type: "evaluation",
    },
    {
      title: "三级贯通",
      type: "threeLevel",
    },
  ],
  active: "基本信息",
});
//返回
const onClickLeft = () => history.back();

const getComponent = (key) => {
  switch (key) {
    case "alarmInfo":
      return disposeEventBasicInfo;
    case "map":
      return MapViewer;
    case "orderInfo":
      return disposeEventOrderInfo;
    case "backUpOrder":
      return disposeEventBackUpOrder;
    case "evaluation":
      return disposeEventEvaluation;
    case "threeLevel":
      return disposeEventThreeLevel;
    default:
      return disposeEventBasicInfo;
  }
};

const changeTab = (val) => {
  state.active = val.name;
};
</script>

<style lang="less" scoped>
.homeDetail {
  height: 100vh;
  background: rgba(243, 243, 243, 1);
  // padding: 0 6px;
  .header {
    // height: 100px;
    background: #ffffff;
    text-align: center;
    // padding-top: 34px;
    .title {
      font-family: PingFang TC, PingFang TC;
      font-weight: 600;
      font-size: 18px;
      color: rgba(0, 0, 0, 0.9);
      // margin-bottom: 20px;
      // border: 1px red solid;
    }
  }

  .content {
    height: calc(100% - 88px);
    // padding: 12px;
    // margin-top: 15px;
    background: rgba(243, 243, 243, 1);
  }
}
</style>
